<template>
	<ln-navBar>
		<template #left>
			<ln-avatar size='60'></ln-avatar>
		</template>
	</ln-navBar>
	<ln-fullPage :hasNavBar="true"
		:hasTabBar="true"
		class="pageEle"
	>
		<view class="main-view">
			<view class="search__container">
				<ln-search placeholder="搜索"></ln-search>
			</view>
			<view class="tab__container">
				<ln-tab></ln-tab>
			</view>
			<swiper class="swiper" 
				:indicator-dots="indicatorDots" 
				:duration="duration" 
				:vertical="true"
				:style="{
					height: pageInnerHeightRef + 'px',
					borderRadius: '36rpx',
					overflow: 'hidden'
				}"
			>
				<swiper-item>
					<view class="image-list__item" :style="{height: pageInnerHeightRef+'px',backgroundColor: 'red'}">
						<!-- <ln-card></ln-card> -->
					</view>
				</swiper-item>
				<swiper-item>
					<view class="image-list__item" :style="{height: pageInnerHeightRef+'px',backgroundColor: 'green'}">
						<!-- <ln-card></ln-card> -->
					</view>
				</swiper-item>
				<swiper-item>
					<view class="image-list__item" :style="{height: pageInnerHeightRef+'px',backgroundColor: 'blue'}">
						<!-- <ln-card></ln-card> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
	</ln-fullPage>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance  } from 'vue'
import { onReady  } from '@dcloudio/uni-app'
	
const pageElementRef = ref(null)
const pageInnerHeightRef = ref(0)
const tabHeightRef = ref(0)
const searchHeightRef = ref(0)
const scrollViewHeight = ref(0)

// Vue实例
const instance = getCurrentInstance()

/**
 * 计算页面内边距
 */
function comparePageInnerHeight() {
	const mainViewDomQuery = uni.createSelectorQuery().in(instance.proxy)
	const tabDomQuery = uni.createSelectorQuery().in(instance.proxy)
	const searchDomQuery = uni.createSelectorQuery().in(instance.proxy)
	
	mainViewDomQuery.select(".main-view")
		.boundingClientRect(rect => {
			pageInnerHeightRef.value = rect.height - 8
		}).exec()
	tabDomQuery.select(".tab__container")
		.boundingClientRect(rect => {
			pageInnerHeightRef.value -= rect.height
		}).exec()
	searchDomQuery.select(".search__container")
		.boundingClientRect(rect => {
			pageInnerHeightRef.value -= rect.height
		}).exec()
}

onMounted(() => {
	comparePageInnerHeight()
})
</script>

<style lang="less" scoped>
	@import './style/index.less';
</style>